<template>
    <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
        <Row :gutter="24" type="flex">
            <Col v-bind="grid">
                <Input v-model="data.name" placeholder="请输入患者姓名/手机号" element-id="name" clearable @on-blur="onSearchItemss" @on-enter="onSearchItems"  @on-clear="onSearchItem"/>
            </Col>
            <Col v-bind="grid">
                <FormItem label="就诊类型" prop="disease" label-for="disease">
                    <Select v-model="data.diagnosis" placeholder="就诊类型" element-id="diagnosis" clearable transfer @on-change="onSearchItem" @on-clear="onSearchItem">
                        <Option v-for="items in types" :key="'type' + items.id" :value="items.id" :disabled="+items.status === 0">{{items.name}}</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col span="8">
                <FormItem label="标签" prop="label" label-for="label">
                    <Select v-model="data.label" filterable multiple @on-change="onSearchItem" @on-clear="onSearchItem">
                        <OptionGroup v-for="(items, index) in labels" :key="'group' + index" :label="items.name">
                            <Option v-for="(item, inum) in items.children" :value="item.id" :key="'label'+inum" :disabled="+item.status === 0">{{ item.name }}</Option>
                        </OptionGroup>
                    </Select>
                </FormItem>
            </Col>
        </Row>
    </Form>
</template>
<script>
    import { mapState } from 'vuex';
    export default {
        data () {
            return {
                grid: {
                    xl: 4,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                data: {
                    name: '',
                    diagnosis: '',
                    label: []
                },
                rules: {

                }
            }
        },
        props: ['labels', 'members', 'types'],
        computed: {
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth () {
                return this.isMobile ? undefined : 80;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            }
        },
        methods: {
            onSearchItem (val, v) {
                this.$emit('search', this.data)
            },
            onSearchItemss (val,v) {
                if (this.data.name === '') {
                    this.$emit('search', this.data)
                } else {

                }
            },
            onSearchItems (val, v) {
                if (this.data.name === '') {
                } else {
                    this.$emit('search', this.data)
                }
            }
        }
    }
</script>
